<template>
  <div class="scene-import-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          场景导入
        </h1>
      </div>
      <div class="header-actions">
        <el-button type="primary" icon="RefreshRight">同步靶标系统场景</el-button>
        <el-button type="success" icon="Plus">+ 导入场景</el-button>
      </div>
    </div>

    <!-- 搜索和过滤 -->
    <div class="search-filter-bar">
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="查询场景名称..."
          prefix-icon="Search"
          clearable
          style="width: 300px"
        />
      </div>
      <div>
        <el-select v-model="selectedCategory" placeholder="全部分类" style="width: 150px;margin-right: 10px;">
          <el-option label="全部分类" value="" />
          <el-option label="电力场景" value="power" />
          <el-option label="航电场景" value="avionics" />
          <el-option label="机车场景" value="railway" />
          <el-option label="卫星载荷场景" value="satellite" />
        </el-select>
        <el-select v-model="selectedFilter" placeholder="筛选条件" style="width: 150px">
          <el-option label="筛选条件" value="" />
          <el-option label="最新导入" value="latest" />
          <el-option label="最热场景" value="popular" />
          <el-option label="推荐场景" value="recommended" />
        </el-select>
      </div>
    </div>

    <!-- 场景卡片网格 -->
    <div class="scenarios-grid">
      <div 
        v-for="scenario in filteredScenarios" 
        :key="scenario.id" 
        class="scenario-card"
      >
        <div class="card-header">
          <div class="scenario-title">{{ scenario.title }}</div>
        </div>
        
        <div class="topology-placeholder">
          <div class="placeholder-content">
            <span>拓扑图</span>
          </div>
        </div>
        
        <div class="scenario-type">
          <el-tag 
            :type="getTypeTagType(scenario.type)" 
            size="small"
          >
            {{ scenario.typeText }}
          </el-tag>
        </div>
        
        <div class="scenario-description">
          {{ scenario.description }}
        </div>
        
        <div class="card-actions">
          <el-button 
            type="default" 
            size="small" 
            icon="View"
            @click="previewScenario(scenario)"
          >
            预览
          </el-button>
          <el-button 
            type="primary" 
            size="small" 
            icon="Plus"
            @click="createTactic(scenario)"
          >
            创建战术
          </el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8, 16, 24, 32]"
        :total="totalScenarios"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Upload, 
  RefreshRight, 
  Plus, 
  Search, 
  View
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('')
const selectedFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(8)

// 场景数据
const scenarios = ref([
  {
    id: 1,
    title: '电力自动化场景',
    type: 'power',
    typeText: '电力场景',
    description: '主控-变电站-配电终端,含DNP3协议。'
  },
  {
    id: 2,
    title: '航电综合测试场景',
    type: 'avionics',
    typeText: '航电场景',
    description: '含飞控、导航、数据链路,OPC UA协议。'
  },
  {
    id: 3,
    title: '机车网络安全场景',
    type: 'railway',
    typeText: '机车场景',
    description: '列控-信号-车载终端,含IEC104协议。'
  },
  {
    id: 4,
    title: '卫星载荷仿真场景',
    type: 'satellite',
    typeText: '卫星载荷场景',
    description: '卫星-地面站-遥测链路,含Modbus协议。'
  }
])

// 计算属性
const filteredScenarios = computed(() => {
  let filtered = scenarios.value

  if (searchKeyword.value) {
    filtered = filtered.filter(scenario => 
      scenario.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  if (selectedCategory.value) {
    filtered = filtered.filter(scenario => 
      scenario.type === selectedCategory.value
    )
  }

  if (selectedFilter.value) {
    // 这里可以根据筛选条件进行排序
    switch (selectedFilter.value) {
      case 'latest':
        filtered = [...filtered].sort((a, b) => b.id - a.id)
        break
      case 'popular':
        // 模拟热门排序
        filtered = [...filtered].sort((a, b) => Math.random() - 0.5)
        break
      case 'recommended':
        // 模拟推荐排序
        filtered = [...filtered].sort((a, b) => Math.random() - 0.5)
        break
    }
  }

  return filtered
})

const totalScenarios = computed(() => filteredScenarios.value.length)

// 方法
const getTypeTagType = (type) => {
  switch (type) {
    case 'power': return 'success'
    case 'avionics': return 'primary'
    case 'railway': return 'warning'
    case 'satellite': return 'info'
    default: return 'info'
  }
}

const previewScenario = (scenario) => {
  console.log('预览场景:', scenario.title)
  // 跳转到预览页面
}

const createTactic = (scenario) => {
  console.log('创建战术:', scenario.title)
  // 跳转到创建战术页面
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 页面初始化
onMounted(() => {
  console.log('场景导入页面已加载')
})
</script>

<style lang="scss" scoped>
.scene-import-container {
  min-height: calc(100vh - 50px);
}

  
  .header-left {
    .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
      
      .el-icon {
        font-size: 20px;
        color: var(--el-color-primary);
      }
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }


.search-filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  
  .search-section {
    flex: 1;
  }
  
  .filter-section {
    display: flex;
    gap: 12px;
  }
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  
  .scenario-card {
    background: var(--card-bg);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    padding: 20px;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--el-color-primary);
      border-radius: 2px 0 0 2px;
    }
    
    .card-header {
      margin-bottom: 16px;
      
      .scenario-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1.4;
      }
    }
    
    .topology-placeholder {
      margin-bottom: 16px;
      
      .placeholder-content {
        width: 100%;
        height: 120px;
        background: #f8f9fa;
        border: 2px dashed #dee2e6;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        font-size: 14px;
      }
    }
    
    .scenario-type {
      margin-bottom: 12px;
    }
    
    .scenario-description {
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--text-color-secondary);
      line-height: 1.5;
    }
    
    .card-actions {
      display: flex;
      gap: 8px;
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

// 响应式设计
@media (max-width: 1200px) {
  .scenarios-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .search-filter-bar {
    flex-direction: column;
    align-items: stretch;
    
    .filter-section {
      justify-content: space-between;
    }
  }
  
  .scenarios-grid {
    grid-template-columns: 1fr;
  }
}
</style> 